@import "@/assets/styles/mixin.scss";
.design-header{
  @include flex-center(space-between);
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #E1E6ED;
  &__title{
    @include flex-align;
    &-circle{
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: #409EFF;
    }
    &-label{
      margin-left: 9px;
      font-size: 18px;
      font-weight: bold;
      color: #131414;
      line-height: 24px;
    }
  }
  &__buttons{
    @include flex-align;
    .button-item{
      @include flex-align;
      cursor: pointer;
    }
    .save-button{
      margin-left: 16px;
    }
    .button-label{
      margin-left: 8px;
      font-size: 16px;
      font-weight: bold;
      color: #4E5969;
      line-height: 22px;
    }
  }
}

.design-form{
  height: calc(100vh - 149px);
}

// 组件列表
:deep(.el-aside) {
  @include flex-column;
  @include scrollBar;
  padding: 0;
  margin-bottom: 0;
  border-right: 1px solid #E1E6ED;
  background-color: #fff;
}
.title{
  font-size: 14px;
  color: #86909C;
  line-height: 22px;
}
.form-group{
  @include flex-column;
  height: 50%;
  overflow-y: auto;
  border-bottom: 1px solid #E1E6ED;
  &__header{
    @include flex-center(space-between);
    padding: 10px 10px 8px;
    border-bottom: 1px solid #E1E6ED;
  }
  &__list{
    flex: 1;
    position: relative;
    overflow-y: auto;
    .list-item{
      @include flex;
      padding: 8px 10px;
      box-sizing: border-box;
      &__label{
        flex: 1;
        cursor: pointer;
        font-size: 14px;
        color: #1A1A1A;
      }
      &__operate{
        @include flex-align;
        :deep(.svg-icon){
          cursor: pointer;
          &+.svg-icon{
            margin-left: 10px;
          }
        }
        &--hover{
          display: none;
        }
      }
      &--active{
        .list-item__label{
          color: #007DFF;
        }
        background-color: #D9E8FF;
      }
      &:hover{
        .list-item__operate--hover{
          display: block;
        }
       //@extend .list-item--active;
      }
    }
  }
}
.components-list{
  @include flex-column;
  height: 50%;
  overflow-y: auto;
  .title{
    margin: 8px 10px;
  }
  ul{
    flex: 1;
    padding: 0 10px;
    .drag {
      @include flex-grid(110px,10px);
      li {
        @include flex-align;
        text-align: center;
        height: 38px;
        border-radius: 3px;
        border: 1px solid #DCDFE6;
        cursor: grab;
        background-color: #fff;

        &:hover {
          border: 1px solid #1989fa;
          color: #1989fa;
        }
        span{
          font-size: 13px;
          color: #1A1A1A;
          line-height: 24px;
        }

        :deep(.el-icon) {
          margin: 0 10px;
        }
      }
    }
  }
}

:deep(.el-empty){
  @include position-center;
}



// main
:deep(.el-main) {
  padding: 0;
}

.layout-main {
  @include flex-column;
  position: relative;
  background-color: #feffff;
  .tool-nav {
    font-size: medium;
    padding: 8px 20px;
    background: #fafafb;
    border-bottom: 1px solid #ebecee;
    .option-buttons {
      @include flex-align;

      .linkage-button {
        @include flex-align;
        margin-left: 10px;
        font-size: 13px;
        color: #666666;
        cursor: pointer;

        i {
          margin-right: 0;
        }
      }
    }

    div:first-child {
      display: inline-block;
      text-align: left;

      i {
        margin-right: 10px;
      }
    }

    div:last-child {
      float: right;

      i {
        margin-left: 10px;
      }
    }

    i {
      color: #7a7a7a;
      cursor: pointer;

      &:hover {
        color: #4b4b4b;
      }
    }
  }
  .work-form {
    height: calc(100% - 38px);
    overflow-y: auto;
    background-color: rgb(245, 246, 246);
    border-left: 1px solid rgb(235, 236, 238);
    border-right: 1px solid rgb(235, 236, 238);

    .pc {
      margin-top: 4%;

      .drag-from {
        height: calc(100vh - 190px);
        background-color: rgb(245, 246, 246);

        .form-item,
        li {
          cursor: grab;
          background: #ffffff;
          padding: 10px;
          border: 1px solid #ebecee;
          margin: 5px 0;
        }
      }
    }

    .tip {
      margin: 50px auto 0;
      width: 65%;
      max-width: 400px;
      padding: 35px 20px;
      border-radius: 10px;
      border: 1px dashed rgba(25, 31, 37, 0.12);
      text-align: center;
      font-size: 14px;
      color: rgb(122, 122, 122);
      z-index: 9999;

      &:hover {
        border: 1px dashed #1989fa;
      }
    }
  }
}

// 复制分组
:deep(.el-dropdown-menu__item){
  .dropdown-item{
    @include flex-center(space-between);

    padding-right: 10px;
    &__text{
      width: 100px;
      margin-right: 30px;
      display: inline-block;
    }
  }

}

// config aside
.layout-param {
  width: 380px;
  text-align: center;
  font-size: 14px;
  color: rgb(122, 122, 122);

  .tool-nav-r {
    @include flex-align;
    text-align: left;
    font-size: small;
    border-left: 1px solid #ebecee;
    padding: 10px 20px;
    background: #fafafb;
    border-bottom: 1px solid #ebecee;
    :deep(.el-icon){
      margin-right: 5px;
      font-size: medium;
    }
  }

  .tip {
    margin-top: 150px;
  }
}
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.select {
  color: #4b4b4b !important;
}

.form-header {
  position: relative;
  font-size: small;
  color: #818181;
  text-align: left;
  border-bottom: 0;
  background-color: #fff;

  p {
    position: relative;
    margin: 0 0 10px 0;

    span {
      position: absolute;
      left: -8px;
      top: 3px;
      color: rgb(217, 0, 19);
    }
  }

  .option {
    position: absolute;
    top: -10px;
    right: -10px;
    i {
      font-size: large;
      cursor: pointer;
      color: #8c8c8c;
      padding: 5px;
      &:hover {
        color: #f56c6c;
      }
    }
  }
}

// 表单预览
.preview{
  @include flex;
  height: 500px;
  overflow: hidden;
  &__groups{
    flex-shrink: 0;
    width: 220px;
    overflow-y: auto;
    border-right: 1px solid #409eff;
    &__item{
      position: relative;
      padding-right: 20px;
      text-align: right;
      font-size: 14px;
      color: #86909C;
      line-height: 40px;
      cursor: pointer;
      &:after{
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: none;
        content: '';
        width: 4px;
        height: 24px;
        background-color: #1684FC;
        border-radius: 2px;
      }
      &:hover{
        @extend .preview__groups__item--active;
      }
      &--active{
        color: #409eff;
        background-color: #E6F7FF;
        &:after{
          display: block;
        }
      }
    }
  }
  &__forms{
    position: relative;
    flex: 1;
    overflow-y: auto;
    margin-left: 20px;
    :deep(.el-empty){
      @include position-center;
    }
  }
}



